<template>
  <template v-if="cMode === 'design'">
    <el-date-picker :type="props.dateType" v-model="val" disabled v-bind="$attrs" />
  </template>
  <template v-else-if="cMode === 'edit'">
    <el-date-picker :type="props.dateType" v-model="val" v-bind="$attrs"  />
  </template>
  <template v-else-if="cMode === 'read' ">
    <span v-text="props.value"></span>
  </template>
  <template v-else-if="cMode === 'hidden' ">
    <span v-show="false" v-text="props.value"></span>
  </template>
</template>

<script lang="ts" setup>
import { ElDatePicker } from 'element-plus'
import {computed, inject, nextTick, onMounted, onUnmounted} from "vue";
import { formModeKey } from "@/components/form/state.key";
import {resetKey,setValueKey} from "@/config/app.keys";
import eventBus from '@/event/eventBus';
interface Props {
  mode?: FormFieldMode
  dateType: DateType
  value?: string
  defaultValue?: string
  id?:string
}

interface Emits {
  (e: 'update:value', v: string): void
}

const props = defineProps<Props>()
const emits = defineEmits<Emits>()

const val = computed<string>({
  get: () => {
    if (props.value) {
      return props.value
    }
    if (props.defaultValue) {
      nextTick(() => emits('update:value', props.defaultValue))
      return props.defaultValue
    }
    return ''
  },
  set: v => {
    emits('update:value', v)
  }
})

const formMode = inject(formModeKey)
const cMode = computed<FormFieldMode>(() => {
  if (props.mode) {
    return props.mode
  }
  if (formMode?.value) {
    return formMode.value
  }
  return "edit"
})
onMounted(() =>{
  // //debugger;
  eventBus.$on(props.id+"_"+resetKey,() => {
    val.value = ""
  })
  eventBus.$on(props.id+"_"+setValueKey,(data) => {
    val.value = data
  })
})
onUnmounted(() =>{
  eventBus.$off(props.id+"_"+resetKey);
  eventBus.$off(props.id+"_"+setValueKey);
})
</script>

<style scoped>

</style>
